/**
 * restrict: 值可以是以下几种:
 * E 作为元素名使用
 * A 作为属性使用
 * C 作为类名使用
 * M 作为注释使用
 * 默认是EA
 * scope:{
 *  =: '双向绑定',
 *  @: '单选绑定'
 *  &: '绑定父组件的方法'
 * }
 * link: function (scope, element, attr) {
 *  scope: 当前作用域,
 *  element: 当前元素,有点类似$(element)以后
 *  attr：当前元素属性
 * }
 */

const dropdownDirective = function () {
    return {
        restrict:'EACM',
        scope: {
            selectedValue: '=',
            fnAction: '&',
            singleValue: '@'
        },
        link: function (scope, element, attr) {
            console.log(scope, element, attr)
            if(scope.selectedValue){
                element.dropdown('set selected', scope.selectedValue)
            }
            element.dropdown({
                onChange: function(val){
                    console.log(val);
                    scope.selectedValue && (scope.selectedValue = val);
                    scope.singleValue = 'singleValue222';
                    console.log(scope.singleValue);
                    scope.fnAction({id:'fff'});//调用父组件的方法
                    scope.$apply();//必须加上这个页面样式才会改变
                }
            });
        }
    }
};

export default ngModule => {
    ngModule.directive('smDropdown', dropdownDirective);
}